<template>
  <section id="uicut-app">
    <section class="g-mainBox">
      <section class="g-sideMenu scroll">
        <div class="title">图文组件</div>
        <ul class="list">
          <li>
            <span v-on:click.stop="btnAddNewModel(1)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu1-1.png" alt />轮播图
            </span>
          </li>
          <!-- <li><span v-on:click.stop="btnAddNewModel(2)"><img src="@/assets/decoration/images/uc-icon-sidemenu1-2.png"
          alt="">广告位</span></li>-->
          <li>
            <span v-on:click.stop="btnAddNewModel(3)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu1-3.png" alt />导航
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(4)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu1-4.png" alt />标题
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(5)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu1-5.png" alt />图文集
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(6)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu1-6.png" alt />图片列表
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(7)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu1-7.png" alt />三方图
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(8)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu1-8.png" alt />四方图
            </span>
          </li>
          <li></li>
        </ul>
        <div class="title">商品组件</div>
        <ul class="list">
          <li>
            <span v-on:click.stop="btnAddNewModel(20)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu3-1.png" alt />商品集
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(21)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu3-2.png" alt />产品集
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(27)">
              <img src="@/assets/decoration/images/coupon.png" alt />优惠券
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(28)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu3-1.png" alt />商品分类
            </span>
          </li>
          <li></li>
          <li></li>
        </ul>

        <div class="title">其他</div>
        <ul class="list">
          <li>
            <span v-on:click.stop="btnAddNewModel(9)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu2-1.png" alt />视频
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(10)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu2-2.png" alt />音频
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(11)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu2-3.png" alt />富文本
            </span>
          </li>
          <!-- <li><span v-on:click.stop="btnAddNewModel(12)"><img src="@/assets/decoration/images/uc-icon-sidemenu2-4.png"
          alt="">辅助空白</span></li>-->
          <li>
            <span v-on:click.stop="btnAddNewModel(13)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu2-5.png" alt />分割线
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(14)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu2-6.png" alt />悬浮图标
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(15)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu2-7.png" alt />按钮
            </span>
          </li>
          <!-- <li><span v-on:click.stop="btnAddNewModel(16)"><img src="@/assets/decoration/images/uc-icon-sidemenu2-8.png"
          alt="">表单</span></li>-->
          <li>
            <span v-on:click.stop="btnAddNewModel(17)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu2-9.png" alt />客服
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(18)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu2-10.png" alt />公告
            </span>
          </li>
          <!-- <li><span v-on:click.stop="btnAddNewModel(19)"><img src="@/assets/decoration/images/uc-icon-sidemenu2-11.png"
          alt="">流量主</span></li>-->
          <li>
            <span v-on:click.stop="btnAddNewModel(26)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu3-3.png" alt />位置
            </span>
          </li>
          <li>
            <span v-on:click.stop="btnAddNewModel(22)">
              <img src="@/assets/decoration/images/uc-icon-sidemenu3-3.png" alt />搜索框
            </span>
          </li>
          <li></li>
          <li></li>
        </ul>

        <!-- <div class="title">官网组件</div>
                <ul class="list">
                    <li><span v-on:click.stop="btnAddNewModel(23)"><img src="@/assets/decoration/images/uc-icon-sidemenu3-1.png"
                                                                        alt="">招聘</span></li>
                    <li></li>
                    <li></li>
        </ul>-->
        <!-- <div class="title">全局组件</div>
        <ul class="list">-->
        <!-- <li><span v-on:click.stop="btnAddNewModel(24)"><img src="@/assets/decoration/images/uc-icon-sidemenu3-1.png"
        alt="">留言板</span></li>-->
        <!-- <li><span v-on:click.stop="btnAddNewModel(25)"><img src="@/assets/decoration/images/uc-icon-sidemenu3-2.png"
        alt="">门店</span></li>-->
        <!-- <li><span v-on:click.stop="btnAddNewModel(26)"><img src="@/assets/decoration/images/uc-icon-sidemenu3-3.png"
                                                                        alt="">位置</span></li>
                    <li></li> 
        </ul>-->
      </section>
      <section class="g-centerBox">
        <div class="operate">
          <a href="javascript:void(0)" class="btn btn_add saving" data-value="0">添加到模板库</a>
          <a href="javascript:void(0)" class="btn btns-submit saving" data-value="1">保存修改页面</a>
          <div style="display: inline-block;margin-left: 4.375rem;">
            模板名称：
            <input
              name="name"
              placeholder="请输入名称"
              required="required"
              style="border: #fff 1px solid !important;padding: 0.3125rem;"
            />
          </div>
          <!-- <span style="display: inline-block;margin-left: 1.25rem;">此模板适用于：</span>
                    <div style="display: inline-block;" class="radios">
                        <input type="radio" name="apply" value="0" title="全部">&nbsp;全部&nbsp;&nbsp;
                        <input type="radio" name="apply" value="1" title="微信">&nbsp;微信&nbsp;&nbsp;
                        <input type="radio" name="apply" value="2" title="小程序">&nbsp;小程序&nbsp;&nbsp;
                        <input type="radio" name="apply" value="3" title="无">&nbsp;无
          </div>-->
          <!-- <span style="display: inline-block;margin-left: 1.25rem;">appid：</span>
                    <select style="width: 7.5rem;" class="temSelect" required="required">
                        <option class="disabledOption" style="display: none;" value="">请选择应用</option>
          </select>-->
        </div>
        <!--<div class="operate">-->
        <!--<a href="javascript:void(0)" class="btn btns-submit btn_save">保存修改页面</a>-->
        <!--<a href="javascript:void(0)" class="btn">选择模板</a>-->
        <!--</div>-->

        <!-- 20190418 -->
        <div class="right-operate">
          <button
            class="btn"
            v-on:click="btnDeleteModel"
            v-show="JSON.stringify(temp) != '{}'"
            :data-id="temp.id"
          >删除</button>
          <button
            class="btn"
            v-on:click="btnMove"
            data-type="Prev"
            v-show="temp.id>0"
            :data-id="temp.id"
          >上移</button>
          <button
            class="btn"
            v-on:click="btnMove"
            data-type="Next"
            v-show="pageParam.length>1 && temp.id< pageParam.length-1"
            :data-id="temp.id"
          >下移</button>
        </div>

        <div class="view-box" id="the_img_div">
          <div class="content-box scroll">
            <template v-for="(item) in pageParam">
              <!-- 轮播图 -->
              <template v-if="item.type==1">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-banner"
                  :key="item.id"
                  :class="{'view-banner': item.details.style === 2, 'uc-edit': item.edit === true }"
                  :style="'height:'+item.details.boxHeight+'px'"
                >
                  <span
                    class="g-viewBoxClose"
                    v-on:click="btnDeleteModel"
                    v-show="item.edit == true"
                    :data-id="item.id"
                  >x</span>
                  <img :src="item.details.imgs[0].src" alt />
                  <div v-if="item.details.dotShow" class="dot-box">
                    <template v-for="(itemImg,itemImgIndex) in item.details.imgs">
                      <template v-if="itemImgIndex==0">
                        <i class="dot dot-on" :style="'background-color:'+item.details.color1"></i>
                      </template>
                      <template v-else>
                        <i class="dot" :style="'background-color:'+item.details.color2"></i>
                      </template>
                    </template>
                  </div>
                </div>
              </template>
              <!-- 广告位 -->
              <template v-if="item.type==2">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-ad"
                  :class="item.edit?'uc-edit':''"
                  :key='item.id'
                  :style="'height:'+item.details.boxHeight+'px'"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="list">
                    <template v-for="itemImg in item.details.imgs">
                      <img :src="itemImg.src" alt :style="'width:'+itemImg.w" />
                    </template>
                  </div>
                </div>
              </template>
              <!-- 宫格导航 -->
              <template v-if="item.type==3">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-grid"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div
                    class="list"
                    :style="'background-color:'+item.details.color2+';color:'+item.details.color1"
                  >
                    <template v-for="itemImg in item.details.imgs">
                      <div
                        class="item"
                        :style="'width:'+item.details.col[item.details.style]+';font-size:'+item.details.fontSize"
                      >
                        <img
                          :src="itemImg.src"
                          alt
                          :style="'border-radius:'+item.details.radius+'px'"
                        />
                        {{itemImg.text}}
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <!-- 标题 -->
              <template v-if="item.type==4">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-title"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div
                    :class="'title style'+item.details.style"
                    :style="'background-color:'+item.details.color2+';color:'+item.details.color1"
                  >
                    <i class="line"></i>
                    <template v-if="item.details.style==5">
                      <span
                        class="txt"
                        :style="'background-color:'+item.details.color2+';font-size:'+item.details.fontSize"
                      >{{item.details.text}}</span>
                    </template>
                    <template v-else>
                      <span
                        class="txt"
                        :style="'font-size:'+item.details.fontSize"
                      >{{item.details.text}}</span>
                    </template>
                    <i class="line"></i>
                  </div>
                </div>
              </template>
              <!-- 图文集 -->
              <template v-if="item.type==5">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-product"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div
                    :class="'list style'+item.details.style"
                    :style="'background-color:'+item.details.color2"
                  >
                    <template v-for="itemImg in item.details.imgs">
                      <div class="item">
                        <div class="img">
                          <img :src="itemImg.src" alt class="cover" />
                        </div>
                        <div class="con">
                          <div
                            class="txt1"
                            :style="';color:'+item.details.color1+';font-size:'+item.details.fontSize"
                          >{{itemImg.title}}</div>
                          <div class="txt2">{{itemImg.text}}</div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <!-- 图片列表 -->
              <template v-if="item.type==6">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-bannerList"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div
                    :class="'list style'+item.details.style"
                    :style="'background-color:'+item.details.color2"
                  >
                    <template v-for="itemImg in item.details.imgs">
                      <div class="item">
                        <div class="img">
                          <img
                            :src="itemImg.src"
                            alt
                            class="cover"
                            :style="'border-radius:'+item.details.radius+'px'"
                          />
                        </div>
                        <div class="txt1" :style="';color:'+item.details.color1">{{itemImg.text}}</div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <!-- 三方图 -->
              <template v-if="item.type==7">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-bannerThree"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="list">
                    <template v-for="(itemImg,indexImg) in item.details.imgs">
                      <div class="item">
                        <div class="img" v-if="indexImg">
                          <img
                            :src="itemImg.src"
                            alt
                            class="cover"
                            style="padding: 1px 1px 0 1px;width: 11.609375rem;height: 5.859375rem;"
                          />
                        </div>
                        <div class="img" v-else>
                          <img
                            :src="itemImg.src"
                            alt
                            style="width: 11.71875rem;height: 11.71875rem;"
                          />
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <!-- 四方图 -->
              <template v-if="item.type==8">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  :key='item.id'
                  class="view-bannerThree"
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="list style2">
                    <template v-for="(itemImg,indexImg) in item.details.imgs">
                      <div class="item">
                        <div class="img" v-if="indexImg">
                          <img
                            :src="itemImg.src"
                            alt
                            class="cover"
                            style="padding: 1px 1px 0 1px;width: 7.810625rem;height: 7.748125rem;"
                          />
                        </div>
                        <div class="img" v-else>
                          <img
                            :src="itemImg.src"
                            alt
                            style="height: 23.576875rem;width: 15.623125rem;"
                          />
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>

              <!-- 视频 -->
              <template v-if="item.type==9">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-video"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="video-box" :style="'height:'+item.details.boxHeight+'px'">
                    <video
                      class="video"
                      src="media/1.mp4"
                      preload="none"
                      :poster="item.details.imgs[0].src"
                      controls="controls"
                      width
                      :height="item.details.boxHeight+'px'"
                    >您的浏览器不支持vedio，请更换浏览器再观看！</video>
                  </div>
                </div>
              </template>
              <!-- 音频 -->
              <template v-if="item.type==10">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-voice"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="voice-box">
                    <div class="item">
                      <div class="left">
                        <img :src="item.details.imgs[0].src" alt />
                        <button class="btn-play">
                          <img src="@/assets/decoration/images/play.png" alt />
                        </button>
                      </div>
                      <div class="right">
                        <div class="txt1">
                          {{item.details.imgs[0].name}}
                          <span class="time">{{item.details.imgs[0].time}}</span>
                        </div>
                        <div class="txt2">{{item.details.imgs[0].author}}</div>
                      </div>
                    </div>
                    <audio src="media/1.mp3" controls="controls"></audio>
                  </div>
                </div>
              </template>
              <!-- 富文本 -->
              <template v-if="item.type==11">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  :key='item.id'
                  class="view-article"
                  :class="item.edit?'uc-edit':''"
                  :style="'background-color:'+item.details.color2"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="article-box" v-html="item.details.text"></div>
                </div>
              </template>
              <!-- 辅助空白 -->
              <template v-if="item.type==12">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-empty"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div
                    class="empty-box"
                    :style="'background-color:'+item.details.color2+';height:'+item.details.boxHeight+'px;'"
                  ></div>
                </div>
              </template>
              <!-- 分割线 -->
              <template v-if="item.type==13">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-splitLine"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div
                    class="splitLine-box"
                    :style="'background-color:'+ item.details.color2 +';padding: '+ item.details.paddingTopBottom +'px 0;'"
                  >
                    <template v-if="item.details.style=='1'">
                      <div
                        class="line"
                        :style="'border-bottom: '+ item.details.boxHeight +'px solid '+ item.details.color1"
                      ></div>
                    </template>
                    <template v-if="item.details.style=='2'">
                      <div
                        class="line"
                        :style="'border-bottom: '+ item.details.boxHeight +'px dashed '+ item.details.color1"
                      ></div>
                    </template>
                    <template v-if="item.details.style=='3'">
                      <div
                        class="line"
                        :style="'border-bottom: '+ item.details.boxHeight +'px dotted '+ item.details.color1"
                      ></div>
                    </template>
                  </div>
                </div>
              </template>
              <!-- 悬浮图标 -->
              <template v-if="item.type==14">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-service"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                  :style="'right:'+item.details.positionRight + '%;bottom:'+item.details.positionBottom + '% ;opacity:' + item.details.opacity"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="item">
                    <img
                      src="https://imgs.juanpao.com/2019%2F06%2F15%2F15605812215d049465e5868.png"
                      alt
                    />
                  </div>
                </div>
              </template>
              <!-- 按钮 -->
              <template v-if="item.type==15">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-botton"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <template v-if="item.details.borderShow">
                    <button
                      class="btn"
                      :style="'background-color:'+ item.details.color2+ ';color:' + item.details.color1 + ';border:' + item.details.color3 + ' 1px solid;border-radius:' + item.details.radius+'px;'"
                    >
                      <img
                        v-if="item.details.iconShow"
                        :src="item.details.imgs[0].src"
                        alt
                        class="icon"
                      />
                      {{item.details.text}}
                    </button>
                  </template>
                  <template v-else>
                    <button
                      class="btn"
                      :style="'background-color:'+ item.details.color2+ ';color:' + item.details.color1 + ';border-radius:' + item.details.radius+'px;'"
                    >
                      <img
                        v-if="item.details.iconShow"
                        :src="item.details.imgs[0].src"
                        alt
                        class="icon"
                      />
                      {{item.details.text}}
                    </button>
                  </template>
                </div>
              </template>
              <!-- 表单 -->
              <template v-if="item.type==16">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-chooseForm"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <button class="btn">{{item.details.text}}</button>
                </div>
              </template>
              <!-- 客服 -->
              <template v-if="item.type==17">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-fixedIcon"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                  :style="'right:'+item.details.positionRight + '%;bottom:'+item.details.positionBottom + '%;opacity:' + item.details.opacity"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="item">
                    <img
                      src="https://imgs.juanpao.com/2019%2F06%2F15%2F15605811505d04941ee6a43.png"
                      alt
                    />
                  </div>
                </div>
              </template>
              <!-- 公告 -->
              <template v-if="item.type==18">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-notice"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                  :style="'background-color:'+item.details.color2+';color:'+item.details.color1"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="item">
                    <el-carousel height="24px" direction="vertical" :autoplay="true">
                      <el-carousel-item v-for="item in item.details.imgs" :key='item' class="item">
                        <img :src="item.src" alt class="icon" />
                        {{item.text}}
                      </el-carousel-item>
                    </el-carousel>
                    <!-- <img :src="item.details.imgs[0].src" alt="" class="icon">
                    {{item.details.text}}-->
                  </div>
                </div>
              </template>
              <!-- 流量主 -->
              <template v-if="item.type==19">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-flowMaster"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                  :style="'height:'+item.details.boxHeight+'px'"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <img src="@/assets/decoration/images/uc-banner2.png" alt />
                </div>
              </template>
              <!-- 商品集 -->
              <template v-if="item.type==20">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-product view-product2"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div
                    :class="'list style'+item.details.style"
                    :style="'background-color:'+item.details.color2"
                  >
                    <template v-for="itemImg in item.details.imgs">
                      <div class="item" :key='itemImg'>
                        <div class="img">
                          <img :src="itemImg.src" alt class="cover" />
                        </div>
                        <div class="con">
                          <div
                            class="txt1"
                            :style="';color:'+item.details.color1+';font-size:'+item.details.fontSize"
                          >{{itemImg.title}}</div>
                          <div class="txt2">{{itemImg.text}}</div>
                          <div class="price">￥{{itemImg.price}}</div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <!-- 产品集 -->
              <template v-if="item.type==21">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  :key='item.id'
                  class="view-bannerList view-bannerList2"
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div
                    :class="'list style'+item.details.style"
                    :style="'background-color:'+item.details.color2"
                  >
                    <template v-for="itemImg in item.details.imgs">
                      <div class="item" :key='itemImg'>
                        <div class="img">
                          <img :src="itemImg.src" alt class="cover" />
                        </div>
                        <div
                          class="txt1"
                          :style="';color:'+item.details.color1+';font-size:'+item.details.fontSize"
                        >{{itemImg.text}}</div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <!-- 搜索框 -->
              <template v-if="item.type==22">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-search"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                  :style="'background-color:'+item.details.color2"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="search-box">
                    <input
                      type="text"
                      class="input"
                      placeholder="请输入"
                      :value="item.details.text"
                      readonly
                      :style="'background-color:'+item.details.color1+';color:'+item.details.color3"
                    />
                    <button class="btns">
                      <img src="@/assets/decoration/images/search.png" alt />
                    </button>
                  </div>
                </div>
              </template>
              <!-- 招聘 -->
              <template v-if="item.type==23">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-jobs"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="list">
                    <template v-for="itemImg in item.details.imgs">
                      <div class="item">
                        <p>{{itemImg.text}}</p>
                        <p>职位：职位名(固定内容)</p>
                        <p>职位：职位名(固定内容)</p>
                        <p>职位：职位名(固定内容)</p>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <!-- 留言板 -->
              <template v-if="item.type==24">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-message"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                  :style="'background-color:'+item.details.color2"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="list">
                    <div class="con1">
                      <textarea
                        class="textarea"
                        name
                        readonly
                        placeholder="感谢提出建议"
                        id
                        cols="30"
                        rows="10"
                      ></textarea>
                    </div>
                    <div class="con2">
                      <div class="item">
                        <span class="tt">姓名</span>
                        <input type="text" class="input" readonly placeholder="请输入姓名（可选）" />
                      </div>
                      <div class="item">
                        <span class="tt">手机</span>
                        <input type="text" class="input" readonly placeholder="请输入手机（可选）" />
                      </div>
                    </div>
                    <div class="operate">
                      <button class="btn btn-white">提交</button>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 门店 -->
              <template v-if="item.type==25">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-shopBanner"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                  :style="'background-color:'+item.details.color2"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="list">
                    <div class="item">
                      <img :src="item.details.imgs[0].src" alt class="icon" />
                      <div class="center" :style="'color:'+item.details.color1">
                        <div class="txt">{{item.details.name}}</div>
                        <div class="txt">工作时间：{{item.details.time}}</div>
                      </div>
                      <img src="@/assets/decoration/images/telephone.png" alt class="icon-tel" />
                    </div>
                  </div>
                </div>
              </template>
              <!-- 位置 -->
              <template v-if="item.type==26">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  class="view-location"
                  :key='item.id'
                  :class="item.edit?'uc-edit':''"
                  :style="'background-color:'+item.details.color2+';color:'+item.details.color1"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="list" style>
                    <div class="item1" v-if="item.details.style=='1'">{{item.details.addr}}</div>
                    <div class="item2" v-if="item.details.style=='2'">
                      <img src="@/assets/decoration/images/map.jpg" alt />
                    </div>
                  </div>
                </div>
              </template>

              <!-- 优惠券 -->
              <template v-if="item.type==27">
                <div
                  v-on:click="btnChooseModel(item.id)"
                  :key='item.id'
                  class="view-location"
                  :class="item.edit?'uc-edit':''"
                  :style="'background-color:'+item.details.color2+';color:'+item.details.color1"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div
                    class="list thisScroll"
                    style="height: 61px;overflow:hidden;white-space:nowrap;margin-left: 1px;"
                  >
                    <div
                      v-for="itemImg in item.details.imgs"
                      :key='itemImg'
                      style="width: 124px;display: inline-block;margin: 5px 0px;height: 51px;margin-right: 1px;"
                    >
                      <img :src="itemImg.src" style="height: 100%;width: 100%;" />
                    </div>
                  </div>
                </div>
              </template>
              <!-- 商品分类 -->
              <template v-if="item.type==28">
                <div
                  :key='item.id'
                  v-on:click="btnChooseModel(item.id)"
                  class="view-location"
                  :class="item.edit?'uc-edit':''"
                >
                  <span class="g-viewBoxClose" v-on:click="btnDeleteModel" :data-id="item.id">x</span>
                  <div class="list thisScroll">
                    <img
                      src="@/assets/decoration/css/images/ship_class1.png"
                      width="100%"
                      v-if="item.details.style === '1'"
                    />
                    <img
                      src="@/assets/decoration/css/images/ship_class2.png"
                      width="100%"
                      v-else-if="item.details.style === '2'"
                    />
                    <img
                      src="@/assets/decoration/css/images/ship_class3.png"
                      width="100%"
                      v-else-if="item.details.style === '3'"
                    />
                    <img
                      src="@/assets/decoration/css/images/ship_class4.png"
                      width="100%"
                      v-else-if="item.details.style === '4'"
                    />
                  </div>
                </div>
              </template>
            </template>
          </div>
        </div>
      </section>
      <!-- scroll -->
      <section class="g-rightParam">
        <!-- 轮播图 -->
        <template v-if="temp.type==1 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">轮播图</div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">焦点</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <!-- <div class="item"><em class="tt">背景</em>
                                <input type="text" id="hue-demo" class="chooseColor" data-name="color2" data-control="hue"
                                    :value="temp.details.color2">
              </div>-->
            </div>
            <div class="title2">显示样式</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.style" label="1">样式一</el-radio>
              <el-radio v-model="temp.details.style" label="2">样式2</el-radio>
            </div>
            <div class="title2">显示焦点</div>
            <div class="radio-box">
              <template>
                <el-radio-group v-model="temp.details.dotShow">
                  <el-radio :label="true">显示</el-radio>
                  <el-radio :label="false">不显示</el-radio>
                </el-radio-group>
              </template>
            </div>
            <div class="title2">轮播图高度</div>
            <div class="g-range">
              <el-slider v-model="temp.details.boxHeight" max="200"></el-slider>
              <!-- <input type="range" min="0" max="200" value="30" :value="temp.details.boxHeight" step="1" data-name="boxHeight"
              class="js_ration">-->
            </div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <h4>
                    <i class="red">*</i>建议尺寸750x360
                    <button
                      class="btn btns-submit"
                      @click="upRecord(itemImgIndex,temp.details.imgs)"
                      v-show="itemImgIndex > 0"
                    >上移</button>
                    <button
                      class="btn btns-submit"
                      @click="downRecord(itemImgIndex,temp.details.imgs)"
                      v-show="itemImgIndex < temp.details.imgs.length-1"
                    >下移</button>
                    <span
                      href
                      class="btn-close"
                      :data-id="itemImgIndex"
                      v-on:click="deleteBannerImg(itemImgIndex)"
                    ></span>
                  </h4>
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                  <div class="btm" @click="link(itemImgIndex)">
                    <span class="tt">链接:</span>
                    <input type="text" class="input" v-model="itemImg.link" disabled />
                  </div>
                </div>
              </template>
              <span href class="btn-add" v-on:click="addBannerImg">+添加</span>
            </div>
          </div>
        </template>

        <!-- 广告位 -->
        <template v-if="temp.type==2 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">广告位</div>
            <div class="title2">广告位高度</div>
            <div class="g-range">
              <el-slider v-model="temp.details.boxHeight" max="200"></el-slider>
            </div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item" :key="itemImgIndex">
                  <h4>
                    <i class="red">*</i>建议尺寸750x360
                    <span
                      href
                      class="btn-close"
                      :data-id="itemImgIndex"
                      v-on:click="deleteBannerImg"
                    ></span>
                  </h4>
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                  <div class="btm">
                    <span class="tt">宽度%:</span>
                    <input type="text" class="input" v-model="itemImg.w" />
                  </div>
                  <div class="btm" @click="link(itemImgIndex)">
                    <span class="tt">链接:</span>
                    <input type="text" class="input" v-model="itemImg.link" disabled />
                  </div>
                </div>
              </template>
              <!-- <span href="" class="btn-add" v-on:click="addBannerImg">+添加</span> -->
            </div>
          </div>
        </template>

        <!-- 导航 -->
        <template v-if="temp.type==3 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">导航</div>
            <div class="title2">分列排版</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.style" label="1">两列</el-radio>
              <el-radio v-model="temp.details.style" label="2">三列</el-radio>
              <el-radio v-model="temp.details.style" label="3">四列</el-radio>
              <el-radio v-model="temp.details.style" label="4">五列</el-radio>
              <!-- <label for="" data-name="col" data-value="50%" class="uc-radio">两列</label>
                            <label for="" data-name="col" data-value="33.33%" class="uc-radio">三列</label>
                            <label for="" data-name="col" data-value="25%" class="uc-radio on">四列</label>
              <label for="" data-name="col" data-value="20%" class="uc-radio">五列</label>-->
            </div>
            <div class="title2">字体大小</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.fontSize" label="12px">小号</el-radio>
              <el-radio v-model="temp.details.fontSize" label="14px">中号</el-radio>
              <el-radio v-model="temp.details.fontSize" label="16px">大号</el-radio>
              <!-- <label for="" data-name="fontSize" data-value="12px" class="uc-radio on">小号</label>
                            <label for="" data-name="fontSize" data-value="14px" class="uc-radio">中号</label>
              <label for="" data-name="fontSize" data-value="16px" class="uc-radio">大号</label>-->
            </div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">字体</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <div class="title2">圆角弧度</div>
            <div class="g-range">
              <el-slider v-model="temp.details.radius"></el-slider>
              <!-- <input type="range" min="0" max="30" value="20" step="1" data-name="radius" class="js_ration" :value="temp.details.radius"> -->
            </div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <h4>
                    <i class="red">*</i>建议尺寸100x100
                    <button
                      class="btn btns-submit"
                      @click="upRecord(itemImgIndex,temp.details.imgs)"
                      v-show="itemImgIndex > 0"
                    >上移</button>
                    <button
                      class="btn btns-submit"
                      @click="downRecord(itemImgIndex,temp.details.imgs)"
                      v-show="itemImgIndex < temp.details.imgs.length-1"
                    >下移</button>
                    <span
                      href
                      class="btn-close"
                      :data-id="itemImgIndex"
                      v-on:click="deleteBannerImg(itemImgIndex)"
                    ></span>
                  </h4>
                  <div class="btm">
                    <span class="tt">名称:</span>
                    <input type="text" class="input" v-model="itemImg.text" />
                  </div>
                  <div class="btm">
                    <span class="tt">图片:</span>
                    <div class="btn-upload small">
                      <template v-if="itemImg.src!=''">
                        <img :src="itemImg.src" alt />
                      </template>
                      <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                    </div>
                  </div>
                  <div class="btm" @click="link(itemImgIndex)">
                    <span class="tt">链接:</span>
                    <input type="text" class="input" v-model="itemImg.link" disabled />
                  </div>
                </div>
              </template>
              <span href class="btn-add" v-on:click="addBannerImg">+添加</span>
            </div>
          </div>
        </template>

        <!-- 标题 -->
        <template v-if="temp.type==4 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">标题文字</div>
            <div class="title2">标题设置</div>
            <div class="input-box">
              <div class="btm">
                <span class="tt">标题文字:</span>
                <input type="text" class="input" v-model="temp.details.text" />
              </div>
            </div>
            <div class="title2">样式设置</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.style" label="1">样式1</el-radio>
              <el-radio v-model="temp.details.style" label="2">样式2</el-radio>
              <el-radio v-model="temp.details.style" label="3">样式3</el-radio>
              <el-radio v-model="temp.details.style" label="4">样式4</el-radio>
              <el-radio v-model="temp.details.style" label="5">样式5</el-radio>
              <el-radio v-model="temp.details.style" label="6">样式6</el-radio>
              <el-radio v-model="temp.details.style" label="7">样式7</el-radio>
              <el-radio v-model="temp.details.style" class="ma" label="8">样式8</el-radio>
              <!-- <label for="" data-name="style" data-value="1" class="uc-radio on">样式一</label>
                            <label for="" data-name="style" data-value="2" class="uc-radio">样式二</label>
                            <label for="" data-name="style" data-value="3" class="uc-radio">样式三</label>
                            <label for="" data-name="style" data-value="4" class="uc-radio">样式四</label>
                            <label for="" data-name="style" data-value="5" class="uc-radio">样式五</label>
                            <label for="" data-name="style" data-value="6" class="uc-radio">样式六</label>
                            <label for="" data-name="style" data-value="7" class="uc-radio">样式七</label>
              <label for="" data-name="style" data-value="8" class="uc-radio">样式八</label>-->
            </div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">字体</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <div class="title2">字体大小</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.fontSize" label="12px">小号</el-radio>
              <el-radio v-model="temp.details.fontSize" label="14px">中号</el-radio>
              <el-radio v-model="temp.details.fontSize" label="16px">大号</el-radio>
              <!-- <label for="" data-name="fontSize" data-value="12px" class="uc-radio on">小号</label>
                            <label for="" data-name="fontSize" data-value="14px" class="uc-radio">中号</label>
              <label for="" data-name="fontSize" data-value="16px" class="uc-radio">大号</label>-->
            </div>
          </div>
        </template>

        <!-- 图文集 -->
        <template v-if="temp.type==5 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">图文集</div>
            <div class="title2">排版样式</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.style" label="1">样式一</el-radio>
              <el-radio v-model="temp.details.style" label="2">样式二</el-radio>
              <el-radio v-model="temp.details.style" label="3">样式三</el-radio>
              <!-- <label for="" data-name="style" data-value="1" class="uc-radio on">样式一</label>
                            <label for="" data-name="style" data-value="2" class="uc-radio">样式二</label>
              <label for="" data-name="style" data-value="3" class="uc-radio">样式三</label>-->
            </div>
            <div class="title2">标题大小</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.fontSize" label="12px">小号</el-radio>
              <el-radio v-model="temp.details.fontSize" label="14px">中号</el-radio>
              <el-radio v-model="temp.details.fontSize" label="16px">大号</el-radio>
              <!-- <label for="" data-name="fontSize" data-value="12px" class="uc-radio on">小号</label>
                            <label for="" data-name="fontSize" data-value="14px" class="uc-radio">中号</label>
              <label for="" data-name="fontSize" data-value="16px" class="uc-radio">大号</label>-->
            </div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">字体</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <h4>
                    <i class="red">*</i>建议尺寸200x160
                    <span
                      href
                      class="btn-close"
                      :data-id="itemImgIndex"
                      v-on:click="deleteBannerImg(itemImgIndex)"
                    ></span>
                  </h4>
                  <div class="btm">
                    <span class="tt">标题:</span>
                    <input type="text" class="input" v-model="itemImg.title" />
                  </div>
                  <div class="btm">
                    <span class="tt">描述:</span>
                    <input type="text" class="input" v-model="itemImg.text" />
                  </div>
                  <div class="btm">
                    <span class="tt">图片:</span>
                    <div class="btn-upload small">
                      <template v-if="itemImg.src!=''">
                        <img :src="itemImg.src" alt />
                      </template>
                      <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                    </div>
                  </div>
                  <div class="btm" @click="link(itemImgIndex)">
                    <span class="tt">链接:</span>
                    <input type="text" class="input" v-model="itemImg.link" disabled />
                  </div>
                </div>
              </template>
              <span href class="btn-add" v-on:click="addBannerImg">+添加</span>
            </div>
          </div>
        </template>

        <!-- 图片列表 -->
        <template v-if="temp.type==6 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">图片列表</div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <div class="title2">排版样式</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.style" label="1">样式1</el-radio>
              <el-radio v-model="temp.details.style" label="2">样式2</el-radio>
              <el-radio v-model="temp.details.style" label="3">样式3</el-radio>
              <el-radio v-model="temp.details.style" label="4">样式4</el-radio>
              <!-- <label for="" data-name="style" data-value="1" class="uc-radio on">样式一</label>
                            <label for="" data-name="style" data-value="2" class="uc-radio">样式二</label>
                            <label for="" data-name="style" data-value="3" class="uc-radio">样式三</label>
              <label for="" data-name="style" data-value="4" class="uc-radio">样式四</label>-->
            </div>
            <div class="title2">圆角弧度</div>
            <div class="g-range">
              <!-- <input type="range" min="0" max="30" value="0" step="1" data-name="radius" class="js_ration" :value="temp.details.radius"> -->
              <el-slider v-model="temp.details.radius"></el-slider>
            </div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <h4>
                    <i class="red">*</i>建议尺寸300x300
                    <span
                      href
                      class="btn-close"
                      :data-id="itemImgIndex"
                      v-on:click="deleteBannerImg(itemImgIndex)"
                    ></span>
                  </h4>
                  <div class="btm">
                    <span class="tt">标题:</span>
                    <input type="text" class="input" v-model="itemImg.text" />
                  </div>
                  <div class="btm">
                    <span class="tt">图片:</span>
                    <div class="btn-upload small">
                      <template v-if="itemImg.src!=''">
                        <img :src="itemImg.src" alt />
                      </template>
                      <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                    </div>
                  </div>
                  <div class="btm" @click="link(itemImgIndex)">
                    <span class="tt">链接:</span>
                    <input type="text" class="input" v-model="itemImg.link" disabled />
                  </div>
                </div>
              </template>
              <span href class="btn-add" v-on:click="addBannerImg">+添加</span>
            </div>
          </div>
        </template>

        <!-- 三方图 -->
        <template v-if="temp.type==7 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">三方图</div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                  <div class="btm" @click="link(itemImgIndex)">
                    <span class="tt">链接:</span>
                    <input type="text" class="input" v-model="itemImg.link" disabled />
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- 四方图 -->
        <template v-if="temp.type==8 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">四方图</div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                  <div class="btm" @click="link(itemImgIndex)">
                    <span class="tt">链接:</span>
                    <input type="text" class="input" v-model="itemImg.link" disabled />
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- 视频 -->
        <template v-if="temp.type==9 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">视频设置</div>
            <div class="title2">视频高度</div>
            <div class="g-range">
              <el-slider v-model="temp.details.boxHeight" max="200"></el-slider>
            </div>
            <div class="title2">视频封面</div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                  <div class="btm">
                    <span class="tt">链接:</span>
                    <input type="text" class="input" v-model="itemImg.link" />
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- 音频 -->
        <template v-if="temp.type==10 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">音频设置</div>
            <div class="title2">音频封面</div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                  <div class="btm">
                    <span class="tt">链接:</span>
                    <input type="text" class="input" v-model="itemImg.link" />
                  </div>
                  <div class="btm">
                    <span class="tt">名称:</span>
                    <input type="text" class="input" v-model="itemImg.name" />
                  </div>
                  <div class="btm">
                    <span class="tt">作者:</span>
                    <input type="text" class="input" v-model="itemImg.author" />
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- 富文本 -->
        <!-- <template > -->
        <div class="setting-banner" v-if="temp.type==11 && temp.edit==true">
          <div class="title">富文本</div>
          <div class="title2">选择颜色</div>
          <div class="color-choose-box">
            <div class="item">
              <em class="tt">背景</em>
              <input
                type="text"
                id="hue-demo"
                class="chooseColor"
                data-name="color2"
                data-control="hue"
                :value="temp.details.color2"
              />
            </div>
          </div>
          <div class="title2">内容</div>
          <div class="textarea-box">
            <div class="btm">
              <!-- <script id="content" type="text/plain" style="min-height: 200px;"></script> -->
              <!-- <script id="content" type="text/plain"></script> -->
              <!-- <textarea name="" id="" cols="30" rows="10" class="textarea"
              v-model="temp.details.text"></textarea>-->
            </div>
          </div>
        </div>
        <div class="div">
          <div id="content" style="min-height: 200px;display: none;"></div>
        </div>
        <!-- </template> -->

        <!-- 辅助空白 -->
        <template v-if="temp.type==12 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">辅助空白</div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <div class="title2">控件高度</div>
            <div class="g-range">
              <input
                type="range"
                min="0"
                max="200"
                value="30"
                step="1"
                data-name="boxHeight"
                class="js_ration"
              />
            </div>
          </div>
        </template>

        <!-- 分割线 -->
        <template v-if="temp.type==13 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">分割线</div>
            <div class="title2">排版选择</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.style" label="1">实线</el-radio>
              <el-radio v-model="temp.details.style" label="2">虚线</el-radio>
              <el-radio v-model="temp.details.style" label="3">点线</el-radio>
              <!-- <label for="" data-name="style" data-value="1" class="uc-radio on">实线</label>
                            <label for="" data-name="style" data-value="2" class="uc-radio">虚线</label>
              <label for="" data-name="style" data-value="3" class="uc-radio">点线</label>-->
            </div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">线条</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <div class="title2">控件高度</div>
            <div class="g-range">
              <el-slider v-model="temp.details.boxHeight"></el-slider>
              <!-- <input type="range" min="0" max="200" value="10" step="1" data-name="boxHeight" title=""
              class="js_ration" :value="temp.details.boxHeight">-->
            </div>
            <div class="title2">控件上下边距</div>
            <div class="g-range">
              <el-slider v-model="temp.details.paddingTopBottom"></el-slider>
              <!-- <input type="range" min="0" max="100" value="5" step="1" data-name="paddingTopBottom"
              class="js_ration" :value="temp.details.paddingTopBottom">-->
            </div>
          </div>
        </template>

        <!-- 悬浮图标 -->
        <template v-if="temp.type==14 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">悬浮图标</div>
            <div class="title2">距底部</div>
            <div class="g-range">
              <el-slider v-model="temp.details.positionBottom"></el-slider>
              <!-- <input type="range" min="0" max="100" value="1" step="1" data-name="positionBottom"
              class="js_ration" :value="temp.details.positionBottom">-->
            </div>
            <div class="title2">距右侧</div>
            <div class="g-range">
              <el-slider v-model="temp.details.positionRight"></el-slider>
              <!-- <input type="range" min="0" max="100" value="1" step="1" data-name="positionRight" :value="temp.details.positionRight"
              class="js_ration">-->
            </div>
            <div class="title2">透明度</div>
            <div class="g-range">
              <el-slider v-model="temp.details.opacity" max="1" step="0.01"></el-slider>
              <!-- <input type="range" min="0" max="100" value="90" step="1" data-name="opacity" class="js_ration" :value="temp.details.opacity"> -->
            </div>
            <div class="title2">回到顶部</div>
            <div class="radio-box">
              <template>
                <el-radio-group v-model="temp.details.goTop">
                  <el-radio disabled :label="true">是</el-radio>
                  <el-radio disabled :label="false">否</el-radio>
                </el-radio-group>
              </template>
            </div>
            <div class="title2">分享</div>
            <div class="radio-box">
              <template>
                <el-radio-group v-model="temp.details.shire">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </template>
            </div>
            <div class="title2">图标</div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                  <div class="btm">
                    <span class="tt">链接:</span>
                    <input
                      type="text"
                      class="input"
                      v-model="itemImg.link"
                      @click="select(itemImgIndex,'link','ship','merchantCategoryTypeMini')"
                    />
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- 																	 -->
        <template v-if="temp.type==15 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">按钮</div>
            <div class="input-box">
              <div class="btm">
                <span class="tt">名称</span>
                <input type="text" class="input" v-model="temp.details.text" />
              </div>
            </div>
            <div class="title2">边框</div>
            <div class="radio-box">
              <template>
                <el-radio-group v-model="temp.details.borderShow">
                  <el-radio :label="true">显示</el-radio>
                  <el-radio :label="false">不显示</el-radio>
                </el-radio-group>
              </template>
            </div>
            <div class="title2">图标</div>
            <div class="radio-box">
              <template>
                <el-radio-group v-model="temp.details.iconShow">
                  <el-radio :label="true">显示</el-radio>
                  <el-radio :label="false">不显示</el-radio>
                </el-radio-group>
              </template>
            </div>
            <div class="title2">圆角弧度</div>
            <div class="g-range">
              <el-slider v-model="temp.details.radius" max="28"></el-slider>
              <!-- <input type="range" min="0" max="50" value="0" step="1" data-name="radius" class="js_ration" :value="temp.details.radius"> -->
            </div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">标题</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
              <div class="item">
                <em class="tt">边框</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color3"
                  data-control="hue"
                  :value="temp.details.color3"
                />
              </div>
            </div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                  <div class="btm">
                    <span class="tt">链接:</span>
                    <input type="text" class="input" v-model="itemImg.link" />
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- 表单 -->
        <template v-if="temp.type==16 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">表单</div>
            <div class="input-box">
              <div class="btm">
                <span class="tt">表单</span>
                <input type="text" class="input" v-model="temp.details.text" />
              </div>
            </div>
          </div>
        </template>

        <!-- 客服 -->
        <template v-if="temp.type==17 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">客服设置</div>
            <div class="title2">距底部</div>
            <div class="g-range">
              <el-slider v-model="temp.details.positionBottom"></el-slider>
              <!-- <input type="range" min="0" max="100" value="1" step="1" data-name="positionBottom" :value="temp.details.positionBottom"
              class="js_ration">-->
            </div>
            <div class="title2">距右侧</div>
            <div class="g-range">
              <el-slider v-model="temp.details.positionRight"></el-slider>
              <!-- <input type="range" min="0" max="100" value="1" step="1" data-name="positionRight" :value="temp.details.positionRight"
              class="js_ration">-->
            </div>
            <div class="title2">透明度</div>
            <div class="g-range">
              <el-slider v-model="temp.details.opacity" max="1" step="0.01"></el-slider>
              <!-- <input type="range" min="0" max="100" value="90" step="1" data-name="opacity" class="js_ration" :value="temp.details.opacity"> -->
            </div>
            <div class="title2">图标</div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <!-- <input type="file" name="" class="btnInputUploadImg" :data-id="itemImgIndex"> -->
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- 公告 -->
        <template v-if="temp.type==18 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">公告设置</div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">文字</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <template>
              <div class="upload-img-box">
                <div class="item" v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                  <div class="title2" style="display: inline-block;">内容</div>
                  <span
                    href
                    class="btn-close"
                    :data-id="itemImgIndex"
                    v-on:click="deleteBannerImg(itemImgIndex)"
                  ></span>
                  <div class="textarea-box">
                    <div class="btm">
                      <textarea name id cols="30" rows="10" class="textarea" v-model="itemImg.text"></textarea>
                    </div>
                  </div>
                  <div class="title2">图标</div>
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                </div>
                <span
                  href
                  class="btn-add"
                  v-on:click="addBannerImg"
                  v-show="temp.details.imgs.length<3"
                >+添加</span>
              </div>
            </template>
          </div>
        </template>

        <!-- 流量主 -->
        <template v-if="temp.type==19 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">浏量主设置</div>
            <div class="title2">高度</div>
            <div class="g-range">
              <input
                type="range"
                min="0"
                max="200"
                value="30"
                step="1"
                data-name="boxHeight"
                class="js_ration"
              />
            </div>
            <div class="title2">浏量主</div>
            <div class="input-box">
              <div class="btm">
                <span class="tt">浏量主ID:</span>
                <input type="text" class="input" v-model="temp.details.id" />
              </div>
            </div>
          </div>
        </template>

        <!-- 商品集 -->
        <template v-if="temp.type==20 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">商品集</div>
            <div class="title2">排版样式</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.style" label="1">样式一</el-radio>
              <el-radio v-model="temp.details.style" label="2">样式二</el-radio>
              <el-radio v-model="temp.details.style" label="3">样式三</el-radio>
              <!-- <label for="" data-name="style" data-value="1" class="uc-radio on">样式一</label>
                            <label for="" data-name="style" data-value="2" class="uc-radio">样式二</label>
              <label for="" data-name="style" data-value="3" class="uc-radio">样式三</label>-->
            </div>
            <div class="title2">标题大小</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.fontSize" label="12px">小号</el-radio>
              <el-radio v-model="temp.details.fontSize" label="14px">中号</el-radio>
              <el-radio v-model="temp.details.fontSize" label="16px">大号</el-radio>
              <!-- <label for="" data-name="fontSize" data-value="12px" class="uc-radio on">小号</label>
                            <label for="" data-name="fontSize" data-value="14px" class="uc-radio">中号</label>
              <label for="" data-name="fontSize" data-value="16px" class="uc-radio">大号</label>-->
            </div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">字体</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <h4>
                    <i class="red">*</i>建议尺寸800x800
                    <button
                      @click="select(itemImgIndex,'productSet','productSet','merchantCategoryTypeMini')"
                      class="btn btns-submit"
                      style="margin-left: 0.625rem;"
                    >选择商品</button>
                    <span
                      href
                      class="btn-close"
                      :data-id="itemImgIndex"
                      v-on:click="deleteBannerImg(itemImgIndex)"
                    ></span>
                  </h4>
                  <div class="btm">
                    <span class="tt">名称:</span>
                    <input
                      type="text"
                      class="input"
                      :class="'title'+itemImgIndex"
                      v-model="itemImg.title"
                      disabled
                    />
                  </div>
                  <div class="btm">
                    <span class="tt">简介:</span>
                    <input type="text" class="input" v-model="itemImg.text" disabled />
                  </div>
                  <div class="btm">
                    <span class="tt">金额:</span>
                    <input type="text" class="input" v-model="itemImg.price" disabled />
                  </div>
                  <div class="btm">
                    <span class="tt">图片:</span>
                    <div class="btn-upload small">
                      <template v-if="itemImg.src!=''">
                        <img :src="itemImg.src" alt />
                      </template>
                      <input
                        type="file"
                        name
                        class="btnInputUploadImg"
                        :data-id="itemImgIndex"
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </template>
              <span href class="btn-add" v-on:click="addBannerImg">+添加</span>
            </div>
          </div>
        </template>

        <!-- 产品集 -->
        <template v-if="temp.type==21 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">产品集</div>
            <div class="title2">排版样式</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.style" label="1">单列</el-radio>
              <el-radio v-model="temp.details.style" label="2">两列</el-radio>
              <el-radio v-model="temp.details.style" label="3">三列</el-radio>
              <el-radio v-model="temp.details.style" label="4">横排滑动</el-radio>
              <!-- <label for="" data-name="style" data-value="1" class="uc-radio on">单列</label>
                            <label for="" data-name="style" data-value="2" class="uc-radio">两列</label>
                            <label for="" data-name="style" data-value="3" class="uc-radio">三列</label>
              <label for="" data-name="style" data-value="4" class="uc-radio">横排滑动</label>-->
            </div>
            <div class="title2">标题大小</div>
            <div class="radio-box">
              <el-radio v-model="temp.details.fontSize" label="12px">小号</el-radio>
              <el-radio v-model="temp.details.fontSize" label="14px">中号</el-radio>
              <el-radio v-model="temp.details.fontSize" label="16px">大号</el-radio>
              <!-- <label for="" data-name="fontSize" data-value="12px" class="uc-radio on">小号</label>
                            <label for="" data-name="fontSize" data-value="14px" class="uc-radio">中号</label>
              <label for="" data-name="fontSize" data-value="16px" class="uc-radio">大号</label>-->
            </div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">字体</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <h4>
                    <i class="red">*</i>建议尺寸200x160
                    <span
                      href
                      class="btn-close"
                      :data-id="itemImgIndex"
                      v-on:click="deleteBannerImg(itemImgIndex)"
                    ></span>
                  </h4>
                  <div class="btm">
                    <span class="tt">标题:</span>
                    <input type="text" class="input" v-model="itemImg.text" />
                  </div>
                  <div class="btm">
                    <span class="tt">图片:</span>
                    <div class="btn-upload small">
                      <template v-if="itemImg.src!=''">
                        <img :src="itemImg.src" alt />
                      </template>
                      <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                    </div>
                  </div>
                  <div class="btm">
                    <span class="tt">链接:</span>
                    <input
                      type="text"
                      class="input"
                      v-model="itemImg.link"
                      @click="select(itemImgIndex,'productSet','ship','merchantCategoryTypeMini')"
                    />
                  </div>
                </div>
              </template>
              <span href class="btn-add" v-on:click="addBannerImg">+添加</span>
            </div>
          </div>
        </template>

        <!-- 搜索框 -->
        <template v-if="temp.type==22 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">搜索框</div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">搜索框</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
              <div class="item">
                <em class="tt">字体</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color3"
                  data-control="hue"
                  :value="temp.details.color3"
                />
              </div>
            </div>
            <div class="title2">热搜内容</div>
            <div class="textarea-box">
              <div class="btm">
                <textarea name id cols="30" rows="10" class="textarea" v-model="temp.details.text"></textarea>
              </div>
            </div>
          </div>
        </template>

        <!-- 招聘 -->
        <template v-if="temp.type==23 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">招聘</div>
            <div class="title2">分列排版</div>
            <div class="radio-box">
              <label for data-name="style" data-value="50%" class="uc-radio on">样式一</label>
            </div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <h4>
                    <span
                      href
                      class="btn-close"
                      :data-id="itemImgIndex"
                      v-on:click="deleteBannerImg"
                    ></span>
                  </h4>
                  <div class="btm">
                    <span class="tt">名称:</span>
                    <input type="text" class="input" v-model="itemImg.text" />
                  </div>
                </div>
              </template>
              <span href class="btn-add" v-on:click="addBannerImg">+添加</span>
            </div>
          </div>
        </template>

        <!-- 留言板 -->
        <template v-if="temp.type==24 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">留言板</div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
          </div>
        </template>

        <!-- 门店 -->
        <template v-if="temp.type==25 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">门店</div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">文字</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <div class="input-box">
              <div class="btm">
                <span class="tt">门店名称:</span>
                <input type="text" class="input" v-model="temp.details.name" />
              </div>
            </div>
            <div class="input-box">
              <div class="btm">
                <span class="tt">营业时间:</span>
                <input type="text" class="input" v-model="temp.details.time" />
              </div>
            </div>
            <div class="input-box">
              <div class="btm">
                <span class="tt">客服电话:</span>
                <input type="text" class="input" v-model="temp.details.tel" />
              </div>
            </div>
            <div class="title2">门店Logo</div>
            <div class="upload-img-box">
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- 位置 -->
        <template v-if="temp.type==26 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">地理位置</div>
            <div class="title2">选择颜色</div>
            <div class="color-choose-box">
              <div class="item">
                <em class="tt">文字</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color1"
                  data-control="hue"
                  :value="temp.details.color1"
                />
              </div>
              <div class="item">
                <em class="tt">背景</em>
                <input
                  type="text"
                  id="hue-demo"
                  class="chooseColor"
                  data-name="color2"
                  data-control="hue"
                  :value="temp.details.color2"
                />
              </div>
            </div>
            <div class="input-box">
              <div class="btm">
                <span class="tt">地址:</span>
                <input
                  type="text"
                  class="input"
                  placeholder="请输入地址描述（限20字内）"
                  v-model="temp.details.addr"
                />
              </div>
            </div>
            <div class="title2">显示方式</div>
            <div class="radio-box">
              <label for data-name="style" data-value="1" class="uc-radio on">文字</label>
              <label for data-name="style" data-value="2" class="uc-radio">图片</label>
            </div>
            <div class="title2">位置坐标</div>
            <div class="input-box">
              <div class="btm">
                <span class="tt">经度</span>
                <input type="text" class="input" v-model="temp.details.lon" />
              </div>
              <div class="btm">
                <span class="tt">纬度</span>
                <input type="text" class="input" v-model="temp.details.lat" />
              </div>
              <div class="operate">
                <button class="btn">拾取坐标</button>
              </div>
            </div>
          </div>
        </template>

        <!-- 优惠券 -->
        <template v-if="temp.type==27 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">优惠券</div>
            <div class="upload-img-box">
              <div style="color: red;margin-bottom: 0.625rem;">建议上传图片大小2:1</div>
              <template v-for="(itemImg,itemImgIndex) in temp.details.imgs">
                <div class="item">
                  <div class="btn-upload">
                    <template v-if="itemImg.src!=''">
                      <img :src="itemImg.src" alt />
                    </template>
                    <input type="file" name class="btnInputUploadImg" :data-id="itemImgIndex" />
                  </div>
                  <div class="btm">
                    <span class="tt">链接:</span>
                    <input
                      type="text"
                      class="input"
                      v-model="itemImg.link"
                      @click="select(itemImgIndex,'link','coupons','shopVouTypes','status=1&collection_type=1')"
                    />
                  </div>
                </div>
              </template>
              <span href class="btn-add" v-on:click="addBannerImgs">+添加</span>
            </div>
          </div>
        </template>

        <!-- 商品分类 -->
        <template v-if="temp.type==28 && temp.edit==true">
          <div class="setting-banner">
            <div class="title">商品分类</div>
            <div class="upload-img-box">
              <div class="title2">显示预购商品</div>
              <div class="radio-box" style="display: flex; flex-flow: row wrap;">
                <el-switch v-model="temp.details.show" active-color="#13ce66"></el-switch>
              </div>
              <div class="title2">排版样式</div>
              <div class="radio-box" style="display: flex; flex-flow: row wrap;">
                <el-radio v-model="temp.details.style" label="1">横图</el-radio>
                <el-radio v-model="temp.details.style" label="2">三小图</el-radio>
                <el-radio v-model="temp.details.style" label="3">大图</el-radio>
                <el-radio v-model="temp.details.style" label="4">两列</el-radio>
              </div>
            </div>
          </div>
        </template>

        <div class="ships" style="display: none;">
          <div class="model-body1" v-show="modelType == 'ship'|| modelType == 'productSet'">
            <div class="search">
              <label class="label">商品名称：</label>
              <input type="text" v-model="search" />
              <button
                class="layui-btn-normal btn"
                v-on:click="searchs('merchantGoods','&searchName=','ship')"
              >搜索</button>
            </div>
            <div style="height:30.625rem;">
              <div class="left">
                <div class="layui-input-block">
                  <select class="selecteds" @change="thisOption">
                    <option class="one" value style="display: none;">请选择商品分类</option>
                    <option
                      class="remove"
                      v-for="classification in classifications"
                      :value="classification.id"
                    >{{classification.name}}</option>
                  </select>
                </div>
              </div>
              <div class="right scrolls">
                <ul class="ship">
                  <template v-for="ship in ships" v-if="ships.length>0">
                    <li
                      class="shipStyle"
                      @dblclick="productSet(ship);linkSelectShip(ship.id)"
                      title="请双击选择商品"
                    >
                      <img :src="ship.pic_urls.split(',')[0]" class="imgShip" />
                      <div class="textShip">
                        <p>{{ship.name}}</p>
                        <p>{{ship.short_name}}</p>
                      </div>
                      <div class="textShip">
                        <p>{{ship.property1}}</p>
                        <p>{{ship.property2}}</p>
                      </div>
                    </li>
                  </template>
                </ul>
              </div>
            </div>
          </div>
          <div class="model-body1" v-show="modelType == 'coupons'">
            <div class="search">
              <label class="label">优惠券名称：</label>
              <input type="text" v-model="search" />
              <button
                class="layui-btn-normal btn"
                @click="searchs('shopVouTypes','status=1&collection_type=1&searchName=','coupons')"
              >搜索</button>
            </div>
            <div style="height:30.625rem;">
              <div class="right coupons" style="margin-left: 200px;">
                <ul class="ship">
                  <li
                    class="shipStyle"
                    v-for="ship in coupons"
                    v-if="coupons.length>0"
                    @dblclick="linkSelectShip(ship.id)"
                    title="请双击选择优惠券"
                  >
                    <div class="textShip">
                      <p>名称：{{ship.name}}</p>
                      <p>开始时间：{{ship.from_date}}</p>
                    </div>
                    <div class="textShip">
                      <p>面值：{{ship.price}}元</p>
                      <p>结束时间：{{ship.to_date}}</p>
                    </div>
                    <div class="textShip">
                      <p>满减金额：{{ship.full_price}}元</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div id="choicePageUrl" style="display: none;"></div>
      </section>
    </section>
  </section>
</template>
<script>
const data = {
  addId: 0,
  pageParam: [],
  temp: {},
  defaultModels: [
    {
      type: 1,
      edit: true,
      details: {
        height: "",
        imgs: [
          {
            src: "./decoration/images/uc-banner.jpg",
            link: "link1"
          }
        ],
        dotShow: true,
        color1: "#ff0000",
        color2: "#999999",
        boxHeight: 180
      }
    },
    {
      type: 2,
      edit: true,
      details: {
        height: "",
        imgs: [
          {
            src: "./decoration/images/uc-banner.jpg",
            link: "link1",
            w: "80%"
          }
        ],
        boxHeight: 180
      }
    },
    {
      type: 3,
      edit: true,
      details: {
        col: "25%",
        fontSize: "12px",
        imgs: [
          {
            src: "./decoration/images/icon-grid.png",
            text: "名称",
            link: ""
          }
        ],
        color1: "#333",
        color2: "#fff",
        radius: "20px"
      }
    },
    {
      type: 4,
      edit: true,
      details: {
        fontSize: "12px",
        style: 1,
        color1: "#333",
        color2: "#fff",
        text: "标题名称"
      }
    },
    {
      type: 5,
      edit: true,
      details: {
        fontSize: "12px",
        style: 1,
        color1: "#333",
        color2: "#fff",
        imgs: [
          {
            src: "./decoration/images/product1.png",
            title: "标题",
            text: "内容内容",
            link: ""
          },
          {
            src: "./decoration/images/product1.png",
            title: "标题2",
            text: "内容内容2",
            link: ""
          }
        ]
      }
    },
    {
      type: 6,
      edit: true,
      details: {
        style: 1,
        color2: "#fff",
        radius: "0px",
        imgs: [
          {
            src: "./decoration/images/bannerList.png",
            text: "标题",
            link: ""
          }
        ]
      }
    },
    {
      type: 7,
      edit: true,
      details: {
        imgs: [
          {
            src: "./decoration/images/three-1.png",
            link: ""
          },
          {
            src: "./decoration/images/three-2.png",
            link: ""
          },
          {
            src: "./decoration/images/three-2.png",
            link: ""
          }
        ]
      }
    },
    {
      type: 8,
      edit: true,
      details: {
        imgs: [
          {
            src: "./decoration/images/four-1.png",
            link: ""
          },
          {
            src: "./decoration/images/three-1.png",
            link: ""
          },
          {
            src: "./decoration/images/three-1.png",
            link: ""
          },
          {
            src: "./decoration/images/three-1.png",
            link: ""
          }
        ]
      }
    },
    {
      type: 9,
      edit: true,
      details: {
        imgs: [
          {
            src: "./decoration/images/uc-banner.jpg",
            link: "link1"
          }
        ],
        boxHeight: 180
      }
    },
    {
      type: 10,
      edit: true,
      details: {
        imgs: [
          {
            src: "./decoration/images/three-1.png",
            link: "link1",
            name: "name1",
            author: "author1",
            time: "00:00"
          }
        ],
        boxHeight: 180
      }
    },
    {
      type: 11,
      edit: true,
      details: {
        text: "请输入",
        color2: "#0080ff"
      }
    },
    {
      type: 12,
      edit: true,
      details: {
        color2: "#eee",
        boxHeight: 10
      }
    },
    {
      type: 13,
      edit: true,
      details: {
        style: 1,
        color1: "#eee",
        color2: "#fff",
        boxHeight: 10,
        paddingTopBottom: "5px"
      }
    },
    {
      type: 14,
      edit: true,
      details: {
        positionRight: "1%",
        positionBottom: "1%",
        opacity: 0.9,
        imgs: [
          {
            src: "./decoration/images/qq.png",
            link: "link1"
          }
        ]
      }
    },
    {
      type: 15,
      edit: true,
      details: {
        text: "按钮",
        borderShow: true,
        iconShow: true,
        radius: "0px",
        color1: "#fff",
        color2: "#0080ff",
        color3: "#ccc",
        imgs: [
          {
            src: "./decoration/images/uc-banner.jpg",
            link: "link1"
          }
        ]
      }
    },
    {
      type: 16,
      edit: true,
      details: {
        text: "请选择表单"
      }
    },
    {
      type: 17,
      edit: true,
      details: {
        positionRight: "1%",
        positionBottom: "1%",
        opacity: 0.9,
        imgs: [
          {
            src: "./decoration/images/service.png",
            link: "link1"
          }
        ]
      }
    },
    {
      type: 18,
      edit: true,
      details: {
        text: "请填写公告内容",
        color1: "#ff0000",
        color2: "#0080ff",
        imgs: [
          {
            src: "./decoration/images/sound.png"
          }
        ]
      }
    },
    {
      type: 19,
      edit: true,
      details: {
        boxHeight: 180,
        id: null
      }
    },
    {
      type: 20,
      edit: true,
      details: {
        fontSize: "12px",
        style: 1,
        color1: "#333",
        color2: "#fff",
        imgs: [
          {
            src: "./decoration/images/product1.png",
            title: "标题",
            text: "内容内容",
            price: 0.0
          },
          {
            src: "./decoration/images/product1.png",
            title: "标题2",
            text: "内容内容2",
            price: 0.0
          }
        ]
      }
    },
    {
      type: 21,
      edit: true,
      details: {
        fontSize: "12px",
        style: 1,
        color1: "#333",
        color2: "#fff",
        imgs: [
          {
            src: "./decoration/images/bannerList.png",
            text: "标题",
            link: ""
          }
        ]
      }
    },
    {
      type: 22,
      edit: true,
      details: {
        text: "请输入",
        color1: "#fff",
        color2: "#f2f2f2",
        color3: "#333"
      }
    },
    {
      type: 23,
      edit: true,
      details: {
        style: 1,
        imgs: [
          {
            text: "职位：职位名"
          }
        ]
      }
    },
    {
      type: 24,
      edit: true,
      details: {
        color2: "#f2f2f2"
      }
    },
    {
      type: 25,
      edit: true,
      details: {
        name: "门店名称",
        time: "8:00-18:00",
        tel: "门店名称",
        color1: "#333",
        color2: "#fff",
        imgs: [
          {
            src: "./decoration/images/shop.png"
          }
        ]
      }
    },
    {
      type: 26,
      edit: true,
      details: {
        color1: "#333",
        color2: "#fff",
        addr: "",
        style: 1,
        lon: "119.1635674238205",
        lat: "34.5723181626876" // 拾取坐标  按钮未处理
      }
    }
  ]
};
export default {
  name: "setting-decoration",
  data() {
    return {
      data
    };
  },
  created: function created() {
    // 更新模块
    this.$watch("temp", function() {
      var temp = data.pageParam;
      temp.forEach(function(item, index) {
        if (item.id == data.temp.id) {
          data.pageParam[index] = data.temp;
        }
      });
    });
  },
  methods: {
    // 添加新模块，并设定为编辑状态，其它模块取消编辑状态
    btnAddNewModel: function btnAddNewModel(e) {
        var idx = e - 1;
        var temp = data.pageParam;
        temp.forEach(function (item, index) {
            temp[index].edit = false;
        });
        data.pageParam = temp;
        setTimeout(function () {
            var tempNewModel = JSON.parse(JSON.stringify(data.defaultModels[idx]));
            tempNewModel.id = data.addId;
            data.addId++;
            data.pageParam.push(tempNewModel);
            data.temp = tempNewModel;
            setTimeout(function () {
                colorChooseInit();
            }, 30);
        }, 100);
    },
    // 删除模块
    btnDeleteModel: function btnDeleteModel(e) {
        var id = e.target.dataset.id;
        console.log(id);

        if (id == undefined || id == '') {
            console.log("未选择模块");
        } else {
            var temp = data.pageParam;
            temp.forEach(function (item, index) {
                if (item.id == id) {
                    data.pageParam.splice(index, 1);
                    data.temp = {};
                }
            });
        }
    },
    // 选择模块
    btnChooseModel: function btnChooseModel(id) {
        var temp = data.pageParam;
        temp.forEach(function (item, index) {
            if (item.id == id) {
                item.edit = true;
                data.temp = item;
            } else {
                item.edit = false;
            }
        });
        setTimeout(function () {
            colorChooseInit();
        }, 30);
    },
    // 上移
    // 下移
    btnMove: function btnMove(e) {
        var type = e.target.dataset.type;
        var id = e.target.dataset.id;
        var temp = JSON.parse(JSON.stringify(data.pageParam));
        var i;
        temp.forEach(function (item, index) {
            if (item.id == id) {
                i = index;
            }
        });
        console.log('i', i);
        var thisData = JSON.parse(JSON.stringify(data.pageParam[i]));
        var max = data.pageParam.length - 1;

        if (type == "Prev") {
            if (i > 0) {
                var prevData = JSON.parse(JSON.stringify(data.pageParam[i - 1]));
                temp[i - 1] = thisData;
                temp[i] = prevData;
            }
        }

        if (type == "Next") {
            if (i < max) {
                var nextData = JSON.parse(JSON.stringify(data.pageParam[i + 1]));
                var nextData = data.pageParam[i + 1];
                temp[i] = nextData;
                temp[i + 1] = thisData;
            }
        }

        data.pageParam = temp;
    },
    // 各种子项操作
    // 添加轮播图片
    addBannerImg: function addBannerImg(e) {
        var obj = {
            src: "",
            link: ""
        };
        data.temp.details.imgs.push(obj);
    },
    // 删除轮播图片
    deleteBannerImg: function deleteBannerImg(e) {
        console.log(e.target.dataset.id);
        var idx = e.target.dataset.id;
        var temp = data.temp.details.imgs;
        var tempData = [];
        temp.forEach(function (item, index) {
            console.log(item, index);

            if (idx != index) {
                tempData.push(item);
            }
        });
        data.pageParam[0].details.imgs = tempData;
    }
  }
};
</script>
<style lang="scss" scoped>
@charset "UTF-8";
/** Created by UICUT.com on 2016/12/31. Contact QQ: 215611388 */
#uicut-app .blue {
  color: #3e97eb;
}

#uicut-app .green {
  color: #19c85b;
}

#uicut-app .green2 {
  color: #1aad19;
}

#uicut-app .gray {
  color: #b9bcc7;
}

#uicut-app .red {
  color: #fc4444;
}

#uicut-app .orange {
  color: #ff7802;
}

html {
  font-family: "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", "黑体",
    Arial, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

article,
aside,
details,
figcacption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background: transparent;
  text-decoration: none;
  color: #333;
}

a:active,
a:hover,
a:focus {
  outline: 0;
  text-decoration: none;
  color: #19c85b;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
}

ton {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: p;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body,
div,
address,
blockquote,
iframe,
ul,
ol,
dl,
dt,
dd,
li,
dl,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
pre,
table,
caption,
th,
td,
form,
legend,
fieldset,
input,
button,
select,
textarea,
article,
aside,
audio,
canvas,
command,
datalist,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
source,
video,
time {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-style: normal;
  font-family: inherit;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: justify;
}

body {
  color: #333;
  background: #fff;
  font: 8px;
  overflow-x: hidden;
}

ul,
li,
ol {
  list-style: none;
  line-height: normal;
}

i,
address,
cite,
dfn,
em,
var {
  font-style: normal;
}

body {
  min-width: 1200px;
}

html,
body {
  min-height: 100%;
}

a,
img,
input[type="text"],
input[type="submit"],
input[type="password"],
textarea,
select,
button,
footer,
header,
time,
span,
em,
i {
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

#uicut-app .g-sideMenu .list,
#uicut-app .g-centerBox .operate,
#uicut-app .view-ad .list,
#uicut-app .view-flowMaster .list,
#uicut-app .view-grid .list,
#uicut-app .view-product .list.style1 .item,
#uicut-app .view-product .list.style3,
#uicut-app .view-bannerList .list.style2,
#uicut-app .view-bannerList .list.style3,
#uicut-app .view-bannerList .list.style4,
#uicut-app .view-bannerThree .list,
#uicut-app .view-voice .voice-box .item,
#uicut-app .view-notice .item,
#uicut-app .view-shopBanner .list .item,
#uicut-app .view-location .item1,
#uicut-app .radio-box,
#uicut-app .upload-img-box .btm,
#uicut-app .input-box .btm,
#uicut-app .cf {
  *zoom: 1;
}

#uicut-app .g-sideMenu .list:before,
#uicut-app .g-centerBox .operate:before,
#uicut-app .view-ad .list:before,
#uicut-app .view-flowMaster .list:before,
#uicut-app .view-grid .list:before,
#uicut-app .view-product .list.style1 .item:before,
#uicut-app .view-product .list.style3:before,
#uicut-app .view-bannerList .list.style2:before,
#uicut-app .view-bannerList .list.style3:before,
#uicut-app .view-bannerList .list.style4:before,
#uicut-app .view-bannerThree .list:before,
#uicut-app .view-voice .voice-box .item:before,
#uicut-app .view-notice .item:before,
#uicut-app .view-shopBanner .list .item:before,
#uicut-app .view-location .item1:before,
#uicut-app .radio-box:before,
#uicut-app .upload-img-box .btm:before,
#uicut-app .input-box .btm:before,
#uicut-app .g-sideMenu .list:after,
#uicut-app .g-centerBox .operate:after,
#uicut-app .view-ad .list:after,
#uicut-app .view-flowMaster .list:after,
#uicut-app .view-grid .list:after,
#uicut-app .view-product .list.style1 .item:after,
#uicut-app .view-product .list.style3:after,
#uicut-app .view-bannerList .list.style2:after,
#uicut-app .view-bannerList .list.style3:after,
#uicut-app .view-bannerList .list.style4:after,
#uicut-app .view-bannerThree .list:after,
#uicut-app .view-voice .voice-box .item:after,
#uicut-app .view-notice .item:after,
#uicut-app .view-shopBanner .list .item:after,
#uicut-app .view-location .item1:after,
#uicut-app .radio-box:after,
#uicut-app .upload-img-box .btm:after,
#uicut-app .input-box .btm:after,
#uicut-app .cf:before,
#uicut-app .cf:after {
  content: "";
  display: table;
}

#uicut-app .g-sideMenu .list:after,
#uicut-app .g-centerBox .operate:after,
#uicut-app .view-ad .list:after,
#uicut-app .view-flowMaster .list:after,
#uicut-app .view-grid .list:after,
#uicut-app .view-product .list.style1 .item:after,
#uicut-app .view-product .list.style3:after,
#uicut-app .view-bannerList .list.style2:after,
#uicut-app .view-bannerList .list.style3:after,
#uicut-app .view-bannerList .list.style4:after,
#uicut-app .view-bannerThree .list:after,
#uicut-app .view-voice .voice-box .item:after,
#uicut-app .view-notice .item:after,
#uicut-app .view-shopBanner .list .item:after,
#uicut-app .view-location .item1:after,
#uicut-app .radio-box:after,
#uicut-app .upload-img-box .btm:after,
#uicut-app .input-box .btm:after,
#uicut-app .cf:after {
  clear: both;
}

#uicut-app .view-product .list .txt2,
#uicut-app .view-notice .item,
#uicut-app .view-location .item1 {
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

#uicut-app input[type="text"],
#uicut-app input[type="password"],
#uicut-app select,
#uicut-app textarea {
  border: #333 1px solid;
  outline: none;
}

#uicut-app input:hover[type="text"],
#uicut-app input:hover[type="password"],
#uicut-app select:hover,
#uicut-app textarea:hover,
#uicut-app input:focus[type="text"],
#uicut-app input:focus[type="password"],
#uicut-app select:focus,
#uicut-app textarea:focus {
  border-color: #19c85b;
}

#uicut-app .left,
#uicut-app .right {
  float: left;
}

#uicut-app .show {
  display: block !important;
}

#uicut-app .content {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

#uicut-app .bg {
  background-color: #f7f7f7;
}

#uicut-app .fill {
  -o-object-fit: fill;
  object-fit: fill;
  height: 100%;
}

#uicut-app .contain {
  -o-object-fit: contain;
  object-fit: contain;
  height: 100%;
}

#uicut-app .cover {
  -o-object-fit: cover;
  object-fit: cover;
  height: 100%;
}

#uicut-app .none {
  -o-object-fit: none;
  object-fit: none;
  height: 100%;
}

#uicut-app .scale-down {
  -o-object-fit: scale-down;
  object-fit: scale-down;
  height: 100%;
}

#uicut-app .btn {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 5px;
  border: #19c85b 1px solid;
  text-align: center;
  background-color: #19c85b;
  color: #fff;
}

#uicut-app .btn:hover {
  opacity: 0.8;
  color: #fff;
}

#uicut-app .btn.btn-blue {
  background-color: #3e97eb;
  border-color: #3e97eb;
}

#uicut-app .btn.btn-gray {
  background-color: #b9bcc7;
  border-color: #b9bcc7;
}

#uicut-app .btn.btn-red {
  background-color: #fc4444;
  border-color: #fc4444;
}

#uicut-app .btn.btn-orange {
  background-color: #ff7802;
  border-color: #ff7802;
}

#uicut-app .btn.btn-white {
  background-color: #fff;
  border-color: #efefef;
  color: #333;
}

#uicut-app input[type="text"],
#uicut-app input[type="password"],
#uicut-app select {
  width: 100%;
  border: #efefef 1px solid;
  height: 30px;
  border-radius: 5px;
  padding: 0 5px;
}

#uicut-app input[type="text"]:focus,
#uicut-app input[type="password"]:focus,
#uicut-app select:focus {
  border-color: #19c85b;
}

#uicut-app input[type="submit"] {
  width: 100%;
  outline: none;
}

#uicut-app input[type="submit"]:hover {
  opacity: 0.8;
}

#uicut-app textarea {
  height: auto;
  min-height: 120px;
  border: #efefef 1px solid;
  border-radius: 5px;
  padding: 5px;
}

#uicut-app input[type="range"] {
  background-color: #19c85b;
  border-radius: 3px;
  width: 100%;
  -webkit-appearance: none;
  height: 3px;
  outline: none;
}

#uicut-app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: default;
  top: 5px;
  height: 20px;
  width: 20px;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  background: none repeat scroll 0 0 #19c85b;
  border-radius: 20px;
}

/* ----------------------------------------------------------------------main-------------------------------------------------------------------- */
#uicut-app {
  font-size: 12px;
}

#uicut-app .g-mainBox {
  position: relative;
  padding-left: 250px;
  padding-right: 340px;
  height: 100%;
  background-color: #f7f8fc;
  min-width: 1200px;
}

#uicut-app .g-sideMenu {
  width: 250px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
}

#uicut-app .g-sideMenu .title {
  background-color: #f7f7f7;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  border-bottom: #efefef 1px solid;
}

#uicut-app .g-sideMenu .list li {
  float: left;
  width: 84px;
  height: 84px;
  border-left: #efefef 1px solid;
  border-bottom: #efefef 1px solid;
  margin-left: -1px;
  margin-bottom: -1px;
  text-align: center;
}

#uicut-app .g-sideMenu .list span,
#uicut-app .g-sideMenu .list a {
  display: block;
  text-align: center;
  padding-top: 10px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

#uicut-app .g-sideMenu .list img {
  display: block;
  margin: 0 auto;
}

#uicut-app .g-rightParam {
  width: 340px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 10px;
}

#uicut-app .g-rightParam .title {
  color: #3e97eb;
  border-bottom: #3e97eb 1px solid;
  line-height: 32px;
  padding: 0 10px;
  margin-bottom: 10px;
}

#uicut-app .g-rightParam .title2 {
  font-size: 14px;
  color: #666;
  font-weight: bold;
  line-height: 30px;
  padding: 0 10px;
}

#uicut-app .g-centerBox {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll; /* 20190418 */ /* 20190418 结束 */
}

#uicut-app .g-centerBox .operate {
  padding: 10px 50px;
}

#uicut-app .g-centerBox .operate .btn {
  line-height: 28px;
  border: none;
  display: inline-block;
  margin-right: 15px;
  padding: 0 10px;
  font-size: 12px;
}

#uicut-app .g-centerBox .operate .btn:hover {
  background-color: #1aad19;
}

#uicut-app .g-centerBox .right-operate {
  position: absolute;
  right: 50%;
  top: 50%;
  margin-right: -220px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#uicut-app .g-centerBox .right-operate .btn {
  display: block;
  margin: 5px 0;
  border: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  outline: none;
}

#uicut-app .g-centerBox .view-box {
  width: 395px;
  height: 831px;
  background: 0 0 no-repeat;
  background-size: 100% 100%;
  margin: 10px auto;
  position: relative;
}

#uicut-app .g-centerBox .content-box {
  width: 375px;
  height: 730px;
  position: absolute;
  left: 10px;
  top: 48px;
  background-color: #fff;
  border: 1px solid #e9eaec;
}

#uicut-app .g-centerBox .content-box .uc-edit {
  border-top: #3e97eb 1px dashed;
  border-bottom: #3e97eb 1px dashed;
  position: relative;
}

#uicut-app .g-centerBox .content-box .uc-edit .g-viewBoxClose {
  display: block;
}

#uicut-app .g-centerBox .content-box .g-viewBoxClose {
  display: none;
  width: 25px;
  height: 25px;
  border-radius: 0 0 0 25px;
  padding-left: 5px;
  background-color: #19c85b;
  color: #fff;
  line-height: 18px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9;
}

#uicut-app .g-centerBox .content-box .g-viewBoxClose:hover {
  background-color: #1aad19;
}

#uicut-app .g-centerBox .content-box > div {
  position: relative;
  overflow: hidden;
}

#uicut-app .view-banner img {
  display: block;
  width: 100%;
}

#uicut-app .view-banner .dot-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
}

#uicut-app .view-banner .dot-box .dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  display: inline-block;
  margin: 0 5px;
}

#uicut-app .view-ad img,
#uicut-app .view-flowMaster img {
  display: block;
  width: 100%;
}

#uicut-app .view-ad .list img,
#uicut-app .view-flowMaster .list img {
  float: left;
}

/* #uicut-app .view-grid .list { padding: 15px 0 5px; } */

#uicut-app .view-grid .list .item {
  width: 25%;
  float: left;
  text-align: center;
  padding: 10px 0;
  line-height: 20px;
  height: 100px;
}

#uicut-app .view-grid .list img {
  display: block;
  margin: 0 auto 5px;
  border-radius: 20px;
  overflow: hidden;
  width: 60px;
  height: 60px;
  overflow: hidden;
}

#uicut-app .view-title .title {
  padding: 5px 10px;
  line-height: 30px;
  position: relative;
}

#uicut-app .view-title .title.style1 {
  background-color: #ff8000;
  color: #17803d;
}

#uicut-app .view-title .title.style2 {
  padding-left: 20px;
}

#uicut-app .view-title .title.style2:after {
  content: "";
  width: 3px;
  border-radius: 3px;
  height: 1.5em;
  background-color: #cd3637;
  left: 10px;
  top: 50%;
  margin-top: -0.75em;
  position: absolute;
}

#uicut-app .view-title .title.style3 {
  text-align: center;
}

#uicut-app .view-title .title.style4 {
  padding-left: 30px;
}

#uicut-app .view-title .title.style4:after {
  content: "";
  width: 10px;
  border-radius: 10px;
  height: 10px;
  border: #cd3637 1px solid;
  left: 10px;
  top: 50%;
  margin-top: -5px;
  position: absolute;
}

#uicut-app .view-title .title.style5 {
  text-align: center;
}

#uicut-app .view-title .title.style5 .line {
  width: 100%;
  height: 1px;
  background-color: #cd3637;
  position: absolute;
  top: 50%;
  left: 0;
}

#uicut-app .view-title .title.style5 .txt {
  background-color: #fff;
  padding: 0 5px;
  position: relative;
  z-index: 9;
}

#uicut-app .view-title .title.style6 {
  text-align: center;
  padding-bottom: 10px;
  background: center bottom no-repeat;
}

#uicut-app .view-title .title.style7 {
  text-align: center;
}

#uicut-app .view-title .title.style7 .line {
  width: 3em;
  height: 1px;
  background-color: #333;
  margin: 0 5px;
  display: inline-block;
  position: relative;
  top: -0.45em;
}

#uicut-app .view-title .title.style7 .txt {
  position: relative;
  padding: 0 1.5em;
}

#uicut-app .view-title .title.style7 .txt:after,
#uicut-app .view-title .title.style7 .txt:before {
  position: absolute;
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: center center no-repeat;
  background-size: 100% 100%;
  top: 50%;
  margin-top: -0.6em;
}

#uicut-app .view-title .title.style7 .txt:after {
  right: 0;
}

#uicut-app .view-title .title.style7 .txt:before {
  left: 0;
}

#uicut-app .view-title .title.style8 {
  text-align: center;
}

#uicut-app .view-title .title.style8 .line {
  width: 3em;
  height: 1px;
  background-color: #333;
  margin: 0 5px;
  display: inline-block;
  position: relative;
  top: -0.45em;
}

#uicut-app .view-title .title.style8 .txt {
  border-left: #333 1px solid;
  border-right: #333 1px solid;
  padding: 0 5px;
  margin: 0 5px;
}

#uicut-app .view-product .list .img {
  overflow: hidden;
}

#uicut-app .view-product .list .txt1 {
  font-size: 1.5em;
  color: #fc4444;
}

#uicut-app .view-product .list .txt2 {
  color: #999;
}

#uicut-app .view-product .list.style1 {
  padding: 10px 10px;
}

#uicut-app .view-product .list.style1 .item {
  margin-top: 10px;
}

#uicut-app .view-product .list.style1 .item:first-child {
  margin-top: 0;
}

#uicut-app .view-product .list.style1 img {
  width: 100%;
  height: 100%;
}

#uicut-app .view-product .list.style1 .img {
  float: left;
  width: 100px;
  height: 80px;
}

#uicut-app .view-product .list.style1 .con {
  margin-left: 10px;
  float: left;
  padding: 5px 0;
  width: 235px;
}

#uicut-app .view-product .list.style2 .item,
#uicut-app .view-product .list.style3 .item {
  margin-bottom: 10px;
}

#uicut-app .view-product .list.style2 .img,
#uicut-app .view-product .list.style3 .img {
  width: 100%;
}

#uicut-app .view-product .list.style2 img,
#uicut-app .view-product .list.style3 img {
  display: block;
  width: 100%;
}

#uicut-app .view-product .list.style2 .con,
#uicut-app .view-product .list.style3 .con {
  padding: 5px 10px;
  line-height: 24px;
}

#uicut-app .view-product .list.style3 .item {
  width: 50%;
  float: left;
}

#uicut-app .view-product .list.style3 .img {
  height: 150px;
  background-color: #f7f7f7;
}

#uicut-app .view-product .list.style3 img {
  display: block;
  width: 100%;
  height: 100%;
}

#uicut-app .view-product .list.style3 .con {
  padding: 5px 10px;
  line-height: 24px;
}

#uicut-app .view-product.view-product2 .txt1 {
  color: #333;
}

#uicut-app .view-product.view-product2 .price {
  color: #fc4444;
}

#uicut-app .view-bannerList .list {
  padding: 5px;
}

#uicut-app .view-bannerList .list .txt1 {
  line-height: 1.5em;
  text-align: center;
  padding-top: 5px;
  font-size: 14px;
}

#uicut-app .view-bannerList .list img {
  display: block;
  width: 100%;
}

#uicut-app .view-bannerList .list .item {
  padding: 5px;
}

#uicut-app .view-bannerList .list.style2 .item,
#uicut-app .view-bannerList .list.style3 .item,
#uicut-app .view-bannerList .list.style4 .item {
  float: left;
}

#uicut-app .view-bannerList .list.style2 .item {
  width: 50%;
  position: relative;
}

#uicut-app .view-bannerList .list.style2 .txt1 {
  color: #fff;
  padding-bottom: 5px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 5px;
}

#uicut-app .view-bannerList .list.style2 .txt2 {
  background-color: rgba(0, 0, 0, 0.3);
  display: block;
  padding: 5px 0;
}

#uicut-app .view-bannerList .list.style3 .item {
  width: 33.33%;
}

#uicut-app .view-bannerList .list.style4 .item {
  width: 25%;
}

#uicut-app .view-bannerList.view-bannerList .list.style2 .txt1 {
  position: relative;
}

#uicut-app .view-bannerList.view-bannerList .list.style2 .txt2 {
  background-color: transparent;
  color: #333;
}

#uicut-app .view-bannerThree .list {
  width: 100%;
}

#uicut-app .view-bannerThree .list .item {
  width: 50%;
  float: left;
  overflow: hidden;
}

#uicut-app .view-bannerThree .list .item img {
  display: block;
  width: 100%;
}

#uicut-app .view-bannerThree .list .item:first-child {
  float: left;
}

#uicut-app .view-bannerThree .list .item:nth-child(2),
#uicut-app .view-bannerThree .list .item:nth-child(3) {
  height: 50%;
}

#uicut-app .view-bannerThree .list.style2 .item:first-child {
  width: 66.66%;
}

#uicut-app .view-bannerThree .list.style2 .item:nth-child(2),
#uicut-app .view-bannerThree .list.style2 .item:nth-child(3),
#uicut-app .view-bannerThree .list.style2 .item:nth-child(4) {
  width: 33.33%;
  height: 33.33%;
}

#uicut-app .view-video .video-box .video {
  display: block;
  width: 100%;
  background-color: #000;
}

#uicut-app .view-voice .voice-box {
  padding: 10px;
}

#uicut-app .view-voice .voice-box .item {
  margin-top: 10px;
  border: #ccc 1px solid;
  overflow: hidden;
}

#uicut-app .view-voice .voice-box .item:first-child {
  margin-top: 0;
}

#uicut-app .view-voice .voice-box .left {
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
}

#uicut-app .view-voice .voice-box .left img {
  display: block;
  width: 100%;
  height: 100%;
}

#uicut-app .view-voice .voice-box .btn-play {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 3em;
  height: 3em;
  background-color: transparent;
  border: #fff 1px solid;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
}

#uicut-app .view-voice .voice-box .right {
  float: left;
  padding: 10px;
  line-height: 40px;
  min-width: 245px;
}

#uicut-app .view-voice .voice-box .txt2 {
  font-size: 1.5em;
}

#uicut-app .view-voice .voice-box .time {
  float: right;
  font-size: 1.5em;
}

#uicut-app .view-voice .voice-box audio {
  display: none;
}

#uicut-app .view-article .article-box {
  padding: 10px;
}

#uicut-app .view-empty .empty-box {
  width: 100%;
  height: 10px;
  background-color: red;
}

#uicut-app .view-fixedIcon,
#uicut-app .view-service {
  position: absolute !important;
  z-index: 999;
  width: 40px;
  height: 40px;
}

#uicut-app .view-fixedIcon .item img,
#uicut-app .view-service .item img {
  display: block;
  width: 100%;
}

#uicut-app .view-botton .btn {
  display: block;
  width: auto;
  margin: 0 auto;
  padding: 5px 20px;
  height: 40px;
  border-radius: 0;
  background-color: #3e97eb;
}

#uicut-app .view-botton .btn .icon {
  width: 24px;
  height: 24px;
  float: left;
  margin-right: 10px;
  display: block;
  position: relative;
  top: 3px;
}

#uicut-app .view-chooseForm {
  padding: 20px;
}

#uicut-app .view-chooseForm .btn {
  display: block;
  width: auto;
  margin: 0 auto;
  padding: 5px 20px;
  height: 40px;
  border: none;
  background-color: #3e97eb;
}

#uicut-app .view-notice {
  padding: 5px;
}

#uicut-app .view-notice .item {
  line-height: 24px;
  padding: 0 5px;
}

#uicut-app .view-notice .item .icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  float: left;
}

#uicut-app .view-search .search-box {
  padding: 10px 5px;
  position: relative;
  background-color: #f7f7f7;
}

#uicut-app .view-search .search-box .input {
  width: 200%;
  height: 36px;
  width: 100%;
  padding-left: 10px;
  padding-right: 40px;
}

#uicut-app .view-search .search-box .btns {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  border: none;
  background-color: transparent;
}

#uicut-app .view-search .search-box .btns img {
  display: block;
  width: 100%;
  height: 100%;
}

#uicut-app .view-jobs .list {
  padding: 5px;
}

#uicut-app .view-jobs .list .item {
  padding: 5px;
  line-height: 24px;
}

#uicut-app .view-message .list {
  padding: 10px;
}

#uicut-app .view-message .list .con1,
#uicut-app .view-message .list .con2 {
  margin-bottom: 10px;
}

#uicut-app .view-message .list .textarea {
  width: 100%;
  display: block;
}

#uicut-app .view-message .list .item {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  border-top: #efefef 1px solid;
}

#uicut-app .view-message .list .item:first-child {
  border: none;
}

#uicut-app .view-message .list .tt {
  position: absolute;
  left: 10px;
  top: 0;
  line-height: 40px;
}

#uicut-app .view-message .list .input {
  height: 40px;
  border: none;
  padding-left: 4em;
}

#uicut-app .view-message .operate {
  text-align: center;
}

#uicut-app .view-message .operate .btn-white {
  display: block;
  margin: 0 auto;
  width: 70%;
  height: 40px;
  border: none;
  line-height: 40px;
  font-size: 1.5em;
}

#uicut-app .view-shopBanner .list {
  padding: 5px;
}

#uicut-app .view-shopBanner .list .item {
  padding: 5px;
}

#uicut-app .view-shopBanner .list .icon {
  width: 52px;
  height: 52px;
  border-radius: 100%;
  float: left;
  display: block;
  margin-right: 10px;
}

#uicut-app .view-shopBanner .list .center {
  width: 240px;
  float: left;
  height: 52px;
  line-height: 20px;
  padding: 6px 0;
}

#uicut-app .view-shopBanner .list .icon-tel {
  float: right;
  width: 32px;
  height: 32px;
  display: block;
  margin-top: 10px;
}

#uicut-app .view-location .item1 {
  padding: 5px 10px;
  background: #fff 10px center no-repeat;
  background-size: 24px 24px;
  padding-left: 44px;
  line-height: 44px;
  height: 44px;
}

#uicut-app .view-location .item2 > img {
  display: block;
  width: 100%;
}

#uicut-app .g-range {
  padding: 10px 10px 20px;
  position: relative;
  border-bottom: #efefef 1px solid;
  margin-bottom: 10px;
}

#uicut-app .color-choose-box {
  padding: 10px;
  border-bottom: #efefef 1px solid;
  margin-bottom: 10px;
  font-size: 12px;
}

#uicut-app .color-choose-box .tt {
  display: inline-block;
  min-width: 4em;
  padding: 0;
}

#uicut-app .color-choose-box .item {
  margin-bottom: 10px;
  line-height: 24px;
}

#uicut-app .radio-box {
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: #efefef 1px solid;
  font-size: 12px;
}

#uicut-app .radio-box .uc-radio {
  background: 0 center no-repeat;
  padding-left: 24px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  margin-bottom: 10px;
  width: 33.33%;
  display: block;
  float: left;
}

#uicut-app .radio-box .uc-radio.on {
}

#uicut-app .upload-img-box {
  padding: 10px;
}

#uicut-app .upload-img-box .btn-add {
  border: #ccc 1px dashed;
  line-height: 32px;
  display: block;
  text-align: center;
}

#uicut-app .upload-img-box .btn-add:hover {
  background-color: #19c85b;
  color: #fff;
  border: #19c85b 1px solid;
}

#uicut-app .upload-img-box .item {
  background-color: #f7fafc;
  margin-bottom: 10px;
  padding: 10px 15px;
}

#uicut-app .upload-img-box .item .btn-close {
  background: center center no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
  float: right;
}

#uicut-app .upload-img-box h4 {
  line-height: 24px;
  margin-bottom: 10px;
  padding: 10px 0;
}

#uicut-app .upload-img-box .btn-upload {
  position: relative;
  height: 120px;
  width: 100%;
  overflow: hidden;
  border: #ddd 1px solid;
}

#uicut-app .upload-img-box .btn-upload img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

#uicut-app .upload-img-box .btn-upload:after {
  content: "+";
  font-size: 70px;
  color: #ccc;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  text-align: center;
  position: absolute;
  line-height: 100px;
}

#uicut-app .upload-img-box .btn-upload input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  opacity: 0;
}

#uicut-app .upload-img-box .btn-upload.small {
  width: 50px;
  height: 50px;
  float: right;
  margin-right: 150px;
}

#uicut-app .upload-img-box .btn-upload.small:after {
  font-size: 24px;
  line-height: 45px;
}

#uicut-app .upload-img-box .btm {
  line-height: 36px;
  margin-top: 10px;
}

#uicut-app .upload-img-box .btm .tt {
  float: left;
}

#uicut-app .upload-img-box .btm .input {
  float: right;
  width: 200px;
  background-color: #ebf3fa;
  height: 36px;
}

#uicut-app .input-box {
  padding: 10px;
}

#uicut-app .input-box .btm {
  line-height: 36px;
  margin-top: 10px;
}

#uicut-app .input-box .btm .tt {
  float: left;
}

#uicut-app .input-box .btm .input {
  float: right;
  width: 200px;
  background-color: #ebf3fa;
  height: 36px;
}

#uicut-app .textarea-box {
  padding: 10px;
}

#uicut-app .textarea-box .btm {
  line-height: 36px;
  margin-top: 10px;
}

#uicut-app .textarea-box .btm .textarea {
  width: 100%;
  background-color: #ebf3fa;
  height: 72px;
  padding: 0px 10px;
}

.view-banner2 {
  padding: 10px;
  box-sizing: border-box;
}
</style>